<template>
	<view class="container">
		<view>
			<diy-nav :title="null" :backIcon="false" :bgColor2="statusBgColor" :is_relative="true"></diy-nav>
		</view>
		<view style="margin: 30rpx">
			<view style="text-align: center;">
				<view style="font-size: 76rpx;color:#FFFFFF;">好团团臻选</view>
				<view style="display: flex;flex-direction: column;color:#FFFFFF;font-size: 32rpx;margin-top: 20rpx;">
					<text>团购，我们是认真滴</text>
					<text>一款快捷好用的团购接龙工具</text>
				</view>
			</view>
			<!-- <image mode="aspectFill" style="width: 100%;height: 308rpx" src="/static/temp/login_str.png"></image> -->
			<view style="margin-top: 60rpx;margin-left: 30%;width: 100%">
				<image mode="aspectFill" style="width: 100%;height: 566rpx;position: relative;" src="/static/temp/login_bg.png"></image>	
			</view>
			
		</view>
		
		<button v-if="first_check" class="confirm-btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号快捷登录</button>
		<button v-else class="confirm-btn" @click="decryptPhoneNumber">手机号快捷登录</button>
		<view class="confirm-btn" @click="cancelLogin()" style="margin: 30rpx auto; text-align: center; background: none; color: #ccc;font-size: 24rpx;">取消登录</view>
		
		<view class="tips">
			<view class="tip_policy">
				<!-- <radio color='#90bbda' style="transform:scale(0.7)"  :checked="is_checked"></radio> -->
				<checkbox @click="setCheck('u')" value="1" :checked="first_check" color="#0191FF" style="transform:scale(0.7)" />
				<view class="policy_content">已阅读并同意<text class="color-b" @click="navTo('privacy')">《用户协议》</text>、<text class="color-b" @click="navTo('policy')">《隐私政策》</text>，未注册的手机号将自动创建本小程序账号</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import DiyNav from "@/components/diy-nav-back";
	import Api from '@/common/api';
	export default{
		components: {
			DiyNav
		},
		data(){
			return {
				statusBgColor:'transparent',
				code:'',
				tip_img:'',
				is_checked:true,
				first_check:false,
			}
		},
		onLoad(){
			
		},
		onShow(){
			let that =this;
			uni.login({
			  provider: 'weixin', //使用微信登录
			  success:async function (loginRes) {	
				  that.code= loginRes.code;
			  }
			});
			let option=this.$api.currentPageOption();
			this.to_url=option.to_url;
		},
		methods: {
			...mapMutations(['login']),
			
			navTo(t){
				uni.navigateTo({
					url:'/pages/public/policy?t='+t
				})
			},
			cancelLogin(){
				uni.navigateBack(-1)
			},
			//授权手机号
			async decryptPhoneNumber(e) {
			    if(!this.first_check){
			    	this.$api.msg(`请同意用户协议和隐私政策`)
			    	return false;
			    }
				if(e.detail.errMsg!='getPhoneNumber:ok'){
					this.$api.msg('获取用户手机失败');
					return false;
				}
				
				let that =this;		
				let params = {'code':this.code,'iv':e.detail.iv,'encData':e.detail.encryptedData};
				let data = await Api.apiCall('post',Api.apiName.wx_auto_reg,params);
				if(data.data){
					that.login(data.data);
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			  },
			  setCheck(t){
				  if(t=='u'){
					  this.first_check=!this.first_check;
				  }
				 
			  },
		},

	}
</script>

<style lang='scss'>
	page{
		/* background-image: url("https://photo.16pic.com/00/47/86/16pic_4786353_b.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center; */
		background: #23A948;
	}
	.container{
	
	}

	.confirm-btn{
		
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 10rpx;
		background: #FFFFFF;
		color: #23A948;
		font-size: $font-lg;
		
	}
	.tips{
		margin: 74rpx;
	}
	
	.tip_title{
		color:#333333;
		font-size: 26rpx;
		padding: 12rpx;
	}
	
	.tip_policy{
		display: flex;
		align-items: flex-start;
		margin-top: 20rpx;
	}
	.policy_content{
		font-size: 13px;
		/* padding: 6rpx 0rpx; */
		color: #fff;
		position: relative;
	}
	.color-b{
		color: #A2FFBC;
	}
	.radio-w{
		width: 35rpx;
		height: 35rpx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
	}
	.radio-n{
		background: #FFFFFF;
		height: 10rpx;
		width: 10rpx;
		border-radius: 50%;
		position: absolute;
		top: 12rpx;
		left: 12rpx;
	}
</style>
